<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>td{width: 100px}</style>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr><td>照片:</td><td id="pic_td"></td></tr>
    <tr><td>姓名:</td><td id="name_td"></td></tr>
    <tr><td>年龄:</td><td id="age_td"></td></tr>
    <tr><td>好友:</td><td id="friends_td"></td></tr>
</table>
<input type="button" value="加载数据" onclick="f()">

<script>
    function f() {
        let person={pic:"../1.jpg",name:"蔡徐坤",age:"18",friends:["吴亦凡","范丞丞","蒋劲夫"]}
        //得到td
        let picTd=document.querySelector("#pic_td")
        let nameTd=document.querySelector("#name_td")
        let ageTd=document.querySelector("#age_td")
        let friendsTd=document.querySelector("#friends_td")
        //把person对象中的数据赋值给td
        nameTd.innerText=person.name
        ageTd.innerText=person.age
        //创建图片标签添加到td中
        let img=document.createElement("img")
        img.src=person.pic
        img.width=100
        picTd.append(img)
        //创建无序列表并添加到td中
        let ul=document.createElement("ul")
        //遍历好友名字
        for (let f of person.friends){
            let li=document.createElement("li")
            li.innerText=f
            ul.append(li)
        }
        //把ul添加到friendsTd中
        friendsTd.append(ul)
    }
</script>
</body>
</html>